.istj{
    left: 14%;
    bottom: 18%;
    scale: 1.4;
    animation: istjTopIn 3s 1;
    animation-delay: -1s;
}
@keyframes istjTopIn {
    0%{
        bottom: 100%;
        opacity: 0;
    }
    100%{
        bottom: 18%;
        opacity: 1;
    }
}
.entj{
    left: 34%;
    bottom: 10%;
    scale: 1.8;
    animation: entjTopIn 3s 1;
    animation-delay: -1s;
}
@keyframes entjTopIn {
    0%{
        bottom: 100%;
        opacity: 0;
    }
    100%{
        bottom: 10%;
        opacity: 1;
    }
}
.entp{
    top: 34%;
    left: 28%;
    scale: 2.2;
    animation: entpTopIn 3s 1;
    animation-delay: -1s;
}
@keyframes entpTopIn {
    0%{
        top: -80%;
        opacity: 0;
    }
    100%{
        top: 34%;
        opacity: 1;
    }
}
.estp{
    top: 50%;
    right: 20%;
    scale: 2;
    animation: estpTopIn 3s 1;
    animation-delay: -1s;
}
@keyframes estpTopIn {
    0%{
        top: 0;
        opacity: 0;
    }
    100%{
        top: 50%;
        opacity: 1;
    }
}
.infp{
    top: 22%;
    left: 12%;
    scale: 1.8;
    animation: infpTopIn 3s 1;
    animation-delay: -0.6s;
}
@keyframes infpTopIn {
    0%{
        top: -40%;
        opacity: 0;
    }
    100%{
        top: 22%;
        opacity: 1;
    }
}
.esfj{
    right: 2%;
    top: 16%;
    scale: 1.2;
    animation: esfjTopIn 3s 1;
    animation-delay: -0.6s;
}
@keyframes esfjTopIn {
    0%{
        top: -40%;
        opacity: 0;
    }
    100%{
        top: 16%;
        opacity: 1;
    }
}
.infj{
    bottom: 0;
    right: 12%;
    scale: 1.6;
    animation: infjTopIn 3s 1;
    animation-delay: -1s;
}
@keyframes infjTopIn {
    0%{
        bottom: 100%;
        opacity: 0;
    }
    100%{
        bottom: 0;
        opacity: 1;
    }
}
.istp{
    right: 16%;
    top: 2%;
    scale: 1.6;
    animation: istpTopIn 3s 1;
    animation-delay: -0.2s;
}
@keyframes istpTopIn {
    0%{
        top: -54%;
        opacity: 0;
    }
    100%{
        top: 2%;
        opacity: 1;
    }
}
.isfp{
    scale: 1.4;
    bottom: -2%;
    left: 4%;
    animation: isfpTopIn 3s 1;
    animation-delay: -1s;
}
@keyframes isfpTopIn {
    0%{
        bottom: 100%;
        opacity: 0;
    }
    100%{
        bottom: -2%;
        opacity: 1;
    }
}
.esfp{
    left: 42%;
    top: 10%;
    scale: 1.6;
    animation: esfpTopIn 3s 1;
    animation-delay: -0.4s;
}
@keyframes esfpTopIn {
    0%{
        top: -50%;
        opacity: 0;
    }
    100%{
        top: 10%;
        opacity: 1;
    }
}
.enfp{
    left: 54%;
    bottom: 12%;
    scale: 1.8;
    animation: enfpTopIn 3s 1;
    animation-delay: -1s;
}
@keyframes enfpTopIn {
    0%{
        bottom: 100%;
        opacity: 0;
    }
    100%{
        bottom: 12%;
        opacity: 1;
    }
}
.isfj{
    right: -2%;
    top: 66%;
    scale: 1.2;
    animation: isfjTopIn 3s 1;
    animation-delay: -1s;
}
@keyframes isfjTopIn {
    0%{
        top: 0;
        opacity: 0;
    }
    100%{
        top: 66%;
        opacity: 1;
    }
}
.intp{
    left: -2%;
    top: 6%;
    scale: 1.6;
    animation: intpTopIn 3s 1;
    animation-delay: -0.4s;
}
@keyframes intpTopIn {
    0%{
        top: -80%;
        opacity: 0;
    }
    100%{
        top: 6%;
        opacity: 1;
    }
}
.enfj{
    scale: 1.4;
    left: 0;
    top: 36%;
    animation: enfjTopIn 3s 1;
}
@keyframes enfjTopIn {
    0%{
        top: 0;
        opacity: 0;
    }
    100%{
        top: 36%;
        opacity: 1;
    }
}
.estj{
    scale: 1.2;
    right: 30%;
    top: -4%;
    animation: estjTopIn 3s 1;
    animation-delay: -0.4s;
}
@keyframes estjTopIn {
    0%{
        top: -70%;
        opacity: 0;
    }
    100%{
        top: -4%;
        opacity: 1;
    }
}
.intj{
    right: 32%;
    top: 22%;
    scale: 1.4;
    animation: intjTopIn 3s 1;
    animation-delay: -0.8s;
}
@keyframes intjTopIn {
    0%{
        top: -40%;
        opacity: 0;
    }
    100%{
        top: 22%;
        opacity: 1;
    }
}
